<template>
  <div class="app-container home">
    <div class="heap">
      <el-form label-width="90px" :model="facForm">
        <el-form-item label="堆芯选择：" prop="radioPrac">
          <el-radio-group v-model="radioPrac" @change="switchRadio">
            <el-radio :label="1">CEFR堆</el-radio>
            <el-radio :label="2">CARR堆</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="堆芯详情：">
          <div class="info-type">
            <el-button size="mini" @click="showDetail()">参数详情</el-button>
          </div>
        </el-form-item>
      </el-form>
      <!-- CEFR堆 -->
      <div class="cefr" v-show="radioPrac == 1">
        <div style="width: 30%; margin-left: 20px">
          <li
            v-for="(item, index) in cefrData.slice(0, 8)"
            :key="index"
            @click="showChart(item)"
          >
            {{ item.paramterName }}：
            <span
              :class="
                item.paramNumber < item.min
                  ? 'max'
                  : item.paramNumber > item.max
                  ? 'max'
                  : ''
              "
              >{{ formatParamValue(item) }}</span
            >
            <!-- <span :class="item.flag ? 'red' : 'green'">{{ item.unit }}</span> -->
            <span style="margin: 0px 6px">{{ item.unit }}</span>
            <span v-if="item.paramNumber > item.max">↑</span>
            <span v-if="item.paramNumber < item.min">↓</span>
          </li>
        </div>
        <div><img src="../../../../assets/images/emergency/img_01.png" /></div>
        <div style="width: 35%; margin-left: 20px">
          <li
            v-for="(item, index) in cefrData.slice(8, 15)"
            :key="index"
            @click="showChart(item)"
          >
            {{ item.paramterName }}：
            <span
              :class="
                item.paramNumber < item.min
                  ? 'max'
                  : item.paramNumber > item.max
                  ? 'max'
                  : ''
              "
              >{{ formatParamValue(item) }}</span
            >
            <!-- <span :class="item.flag ? 'red' : 'green'">{{ item.unit }}</span> -->
            <span style="margin: 0px 6px">{{ item.unit }}</span>
            <span v-if="item.paramNumber > item.max">↑</span>
            <span v-if="item.paramNumber < item.min">↓</span>
          </li>
          <li style="list-style-type: none; margin-left: 20px">
            <span>注：包容小室为302房间</span>
          </li>
        </div>
      </div>
      <!-- CARR堆 -->
      <div class="cefr" v-show="radioPrac == 2">
        <div style="width: 30%; margin-left: 20px">
          <li
            v-for="(item, index) in cefrData.slice(0, 7)"
            :key="index"
            @click="showChart(item)"
          >
            {{ item.paramterName }}：
            <span
              :class="
                item.paramNumber < item.min
                  ? 'max'
                  : item.paramNumber > item.max
                  ? 'max'
                  : ''
              "
              >{{ formatParamValue(item) }}</span
            >
            <!-- <span :class="item.flag ? 'red' : 'green'">{{ item.unit }}</span> -->
            <span style="margin: 0px 6px">{{ item.unit }}</span>
            <span v-if="item.paramNumber > item.max">↑</span>
            <span v-if="item.paramNumber < item.min">↓</span>
          </li>
        </div>
        <div>
          <img src="../../../../assets/images/emergency/img_caar.png" />
        </div>
        <div style="width: 35%; margin-left: 20px">
          <li
            v-for="(item, index) in cefrData.slice(7, 15)"
            :key="index"
            @click="showChart(item)"
          >
            {{ item.paramterName }}：
            <span
              :class="
                item.paramNumber < item.min
                  ? 'max'
                  : item.paramNumber > item.max
                  ? 'max'
                  : ''
              "
              >{{ formatParamValue(item) }}</span
            >
            <!-- <span :class="item.flag ? 'red' : 'green'">{{ item.unit }}</span> -->
            <span style="margin: 0px 6px">{{ item.unit }}</span>
            <span v-if="item.paramNumber > item.max">↑</span>
            <span v-if="item.paramNumber < item.min">↓</span>
          </li>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { flagDataList } from "@/api/show/KDFacility";
import { getLatestData } from "@/api/emergency/workData";

export default {
  name: "CEFRnow",
  data() {
    return {
      facId: 1,
      newListData: [],
      radioPrac: 1,
      ids: [],
      nowTime: new Date().getTime(),
      tableData: [],
      cefrData: [],
      newListData: [],
      mapApp: null,
      facForm: {}, //表单
    };
  },
  mounted() {
    this.getChartsDataFlag(this.radioPrac);
  },
  methods: {
    switchRadio(val) {
      if (val == 1) {
        this.cefrData = [];
        this.getChartsDataFlag(this.radioPrac);
        // alert(this.radioPrac)
      } else {
        this.cefrData = [];
        this.getChartsDataFlag(this.radioPrac);
      }
    },
    showDetail() {
      //页面跳转
      // this.$router.push({
      //   path: "/facMonitor/workData/paraDetail",
      //   query: {
      //     facId: this.radioPrac,
      //   },
      // });
      // 子组件调用父组件方法-显示详情页page2
      console.log("heres");
      // this.$parent.changePage(2);
      this.$emit("changePage");
      // this.changePage(2);
    },
    // 点击具体的参数跳转详情页面
    showChart(row) {
      console.log(row, "row");
      this.$router.push({
        path: "/facMonitor/workData/detail",
        query: {
          facId: this.facId,
          ids: row.id,
          name: row.paramterName,
          max: row.max,
          min: row.min,
        },
      });
    },
    // 获取页面li数据前十五条
    getChartsDataFlag(isPrac) {
      console.log(isPrac);
      const params = {
        facId: isPrac,
        ids: "",
      };
      getLatestData(params).then((res) => {
        console.log(111, res);
        if (res.code == 200) {
          this.tableData = res.data.paramObjectList;
          // 列表数据
          let sort = []; // 分类
          let cefrData = [];
          // 大屏cefr展示15条数据
          this.tableData.forEach((item) => {
            if (item.sort !== null) {
              sort.push(item.sort);
            }

            if (item.showFlag >= 1) {
              cefrData.push(item);
            }
          });
          let newarrshen = this.jsonSort(
            JSON.parse(JSON.stringify(cefrData)),
            "showFlag"
          );
          this.cefrData = newarrshen;
          console.log("++++++++++++++", this.cefrData);
          // 数组去重 获取键名(sort分类)
          let type = Array.from(new Set(sort));
          let newListData = [];
          type.forEach((item) => {
            this.tableData.forEach((e) => {
              if (e.sort == item && e.sort !== null) {
                newListData.push(e);
              }
            });
          });
          // 按组分类 (输出二维数组)
          let sameType = [];
          sameType.push(this.classify(newListData, "sort"));
          this.newListData = sameType;
        }
      });
    },
    jsonSort(array, field) {
      let newArray = [];
      //数组长度小于2 或 没有指定排序字段 或 不是json格式数据
      if (array.length < 2 || !field || typeof array[0] !== "object")
        return array;

      //数字类型排序
      if (typeof array[0][field] === "number") {
        array.sort(function (x, y) {
          return x[field] - y[field];
        });
      }
      //字符串类型排序
      if (typeof array[0][field] === "string") {
        array.sort(function (x, y) {
          return x[field].localeCompare(y[field]);
        });
      }
      newArray = array;
      return newArray;
    },
    //数据归类方法
    classify(arr, key) {
      let kind = []; //存放属性标识
      let newArr = []; //返回的数据
      arr.map((item) => {
        // 判断key是否存在，不存在则添加
        if (!kind.includes(item[key])) {
          kind.push(item[key]); //kind添加新标识
          newArr.push([]); //添加数组
        }
        let index = kind.indexOf(item[key]); //返回带有标识在kind内的下标，判断加入哪个数组
        newArr[index].push(item); //将对象存入数组
      });
      return newArr;
    },
    /*处理小数和科学计数法的函数*/
    formatParamValue(item) {
      if (this.praseStrEmpty(item.paramNumber) != "") {
        if (Number(item.scmFlag) == 1) {
          let str = "";
          let num = Math.abs(item.paramNumber);
          let p = num == 0 ? 0 : Math.floor(Math.log(num) / Math.LN10);
          let m = 0;
          if (num.toString().indexOf(".") > -1) {
            m = num.toString().split(".")[1].length;
          }

          let n =
            Number(num.toString().replace(".", "")) * Math.pow(10, -p - m);
          str =
            (item.paramNumber >= 0 ? "" : "-") +
            parseFloat(n).toFixed(item.bit) +
            "E" +
            (p >= 0 ? "+" : "-");
          let pNew = (new Array(2).join(0) + Math.abs(p)).slice(-2);
          str += pNew;
          return str;
        }
        if (Number(item.bit) >= 0) {
          let num = parseFloat(item.paramNumber).toFixed(item.bit);
          return num;
        }
      }
      return item.paramNumber;
    },
  },
};
</script>

<style scoped lang="scss">
.red {
  color: red;
}
.green {
  color: green;
}
.card-box {
  margin-bottom: 20px;
}
.heap {
  margin: 4px;
}
.list {
  margin: 0 auto;
  background: #f1f1f1;
  padding: 10px;
  border-radius: 5px;
}
.list ul {
  padding: 0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.list ul li {
  width: 220px;
  list-style: none;
  background: #fff;
  margin: 5px;
  padding: 10px;
  font-size: 14px;
  border-radius: 5px;
}
.list ul li:hover {
  cursor: pointer;
  background: #edf6ff;
}
.cefr {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}
.cefr img {
  width: 300px;
}
.cefr li {
  font-size: 16px;
  cursor: pointer;
  line-height: 50px;
}
.info-type {
  margin-bottom: 20px;
}
.run-state {
  display: flex;
  justify-content: space-around;
}
#mapContainer {
}
::v-deep .el-form-item {
  height: 38px;
  margin-bottom: 0px;
}
.min {
  color: green;
}
.max {
  color: red;
}
</style>
